<template>
	<view class="container">
		<cu-custom bgColor="primary-bg-color" :isBack="true">
			<template #content>
				<text>LG AC</text>
			</template>
		</cu-custom>
		<view style="margin-top: 200rpx">
			<thermostat
				:width="thermostat.width"
				:height="thermostat.height"
				:scaleNum="thermostat.scaleNum"
				:currentT="18"
				@leaf="handleLeaf"
				@end="handleTouchEnd"
			/>
		</view>

		<view class="flex align-center justify-around padding margin-top-xl">
			<view v-for="(item, index) in btnList" :key="index" class="flex justify-center align-center flex-direction">
				<view class="neumorphic-button" :class="[item.seleted ? 'active-btn' : '']" @tap="handleChoose(item)">
					<view
						class="iconfont"
						:class="[item.icon]"
						style="font-size: 44rpx; z-index: 100"
						:style="{ color: item.seleted ? '#ffffff' : '#acacac' }"
					></view>
				</view>
				<view class="text-sm margin-top-sm">
					<text class="text-ABC">{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="flex justify-center align-center">
			<view class="padding shadow shadow-grey" style="border-radius: 20rpx; background-color: #cbccce">
				<view class="text-black">Temp indoor</view>
				<view class="margin-top-sm flex"
					><text class="text-bold text-black">18° </text>
					<view class="text-gray" style="transform: translateY(-10rpx); font-size: 32rpx">c</view></view
				>
			</view>
			<view
				class="padding shadow shadow-grey margin-left-sm"
				style="border-radius: 20rpx; background-color: #cbccce"
			>
				<view class="text-black">Temp indoor</view>
				<view class="margin-top-sm flex"
					><text class="text-bold text-black">18° </text>
					<view class="text-gray" style="transform: translateY(-10rpx); font-size: 32rpx">c</view></view
				>
			</view>
			<view
				class="padding shadow shadow-grey margin-left-sm"
				style="border-radius: 20rpx; background-color: #cbccce"
			>
				<view class="text-black">Temp indoor</view>
				<view class="margin-top-sm flex"
					><text class="text-bold text-black">18° </text>
					<view class="text-gray" style="transform: translateY(-10rpx); font-size: 32rpx">c</view></view
				>
			</view>
		</view>
		<view class="flex-justify-align-center w-100 margin-top-xl">
			<view class="flex justify-between padding-lr-lg selection">
				<text>LG AC- LR</text>
				<text class="cuIcon-unfold"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import thermostat from '@/compoments/thermostat/thermostat.vue';
	export default {
		components: { thermostat },
		data() {
			return {
				// 整个扭动器的大小
				thermostat: {
					width: 420,
					height: 420,
					scaleNum: 21,
				},
				btnList: [
					{
						icon: 'icon-hot',
						seleted: false,
						name: 'mode',
						click() {
							console.log('...操作起来吧');
						},
					},
					{
						icon: 'icon-if_coda_eco_ecology_',
						seleted: false,
						name: 'eco',
						click() {
							console.log('...操作起来吧');
						},
					},
					{
						icon: 'icon-fuwuyuanqingjieshijianbiao',
						seleted: false,
						name: 'schedule',
						click() {
							console.log('...操作起来吧');
						},
					},
					{
						icon: 'icon-lishi2',
						seleted: false,
						name: 'history',
						click() {
							console.log('...操作起来吧');
						},
					},
				],
				activeIndex: -1,
			};
		},

		methods: {
			handleChoose(item) {
				item.seleted = !item.seleted;
				item.click && item.click(item);
			},
			handleLeaf() {
				console.log('点击了绿叶');
			},
			handleTouchEnd(res) {},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		touch-action: pan-y;
		--back-color: #cacacad5;
		--shadow-color: 0, 0, 0;
		--text-color: #acacac;
		--light-color: 255, 255, 255;
		--active-back-color: #777ea0;
		--active-text-color: #ffffff;
		background-color: #f0f1f5;
	}

	.neumorphic-button {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 6rpx solid var(--back-color);
		background-color: #f0f1f5;
		box-shadow: inset -4rpx -2rpx 4rpx 0rpx rgba(var(--shadow-color), 0.3),
			inset 0 0 4px 6rpx rgba(var(--light-color), 1);
	}
	.active-btn {
		@extend .neumorphic-button;
		&::after {
			content: '';
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #42445e;
			box-shadow: inset 0 0 10rpx 10rpx var(--active-back-color);
		}
	}
	.selection {
		line-height: 80rpx;
		width: 50%;
		border-radius: 40rpx;
		border: 4rpx solid #ffffff;
		background-color: #dce1e7;
	}
</style>
